<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <table border="1">
    <tr>
      <td>照片:</td>
      <td><img :src="person.url" width="100" ></td>
    </tr>
    <tr><td>姓名</td><td>{{person.name}}</td></tr>
    <tr><td>年龄</td><td>{{person.age}}</td></tr>
    <tr><td>好友</td><td>
      <ul>
        <li v-for="name in person.friends">{{name}}</li>
      </ul>
    </td></tr>
  </table>
  <input type="button" value="请求数据" @click="f()">
</div>

 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
   <script>
     let v=new Vue({
       el:"body>div",
       data:{
         person:{}
       },
       methods:{
         f(){
           v.person={name:"张三",age:10,url:"../b.png" ,friends:["李白","王维","杜甫"] }
         }
       }
     })

   </script>

</body>
</html>